<?php if(!defined('IN_DISCUZ')) exit('Access Denied'); hookscriptoutput('view');?>
﻿<?php include template('common/header'); ?><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>直播详情页</title>
    <link rel="stylesheet" href="source/plugin/zhibo/static/style/reset_css.css" />
    <link rel="stylesheet" href="source/plugin/zhibo/static/style/font/iconfont.css" />
    <link rel="stylesheet" href="source/plugin/zhibo/static/style/all.css" />
    <link rel="stylesheet" href="source/plugin/zhibo/static/danmu/style.css"/>
    <link rel="stylesheet" href="source/plugin/zhibo/static/danmu/barrager.css"/>
    <!--[if lt IE 9]>    <script src="source/plugin/zhibo/static/js/respond.src.js" type="text/javascript"></script>
    <script src="source/plugin/zhibo/static/js/html5.js" type="text/javascript"></script>
    <![endif]-->
</head>
<body>

<div class="text">
    asdas
</div>

<div id="Video_Content">


    <div id="Video_Playwindow">


        <div class="VideoHeader">
            <h1 class="mainTitle">新升阳新品发布会 </h1>

            <a href="#" class="btn_livemobilephone"> <i class="iconfont icon-shouji"></i> 手机看直播 </a>
            <a href="#" class="btn_share"><i class="iconfont icon-fenxiang"></i> 分享 </a>
            <span class="total_see"><i class="iconfont icon-yanjing"></i> 323333 </span>
            <span class="total_zan" onclick="zan()"><i class="iconfont icon-appreciate"></i><?php echo $getData['0']['star'];?></span>
            <span class="clear"></span>
        </div>
        <!-- .VideoHeader结束 -->

        <div id="VideoShare">
            <div class="ewm">
                <img src="source/plugin/zhibo/static/images/ewm.jpg" alt="description "/>
            </div>

            <p>呼唤小伙伴们来看围观~ </p>

            <ul>
                <li><a href="#" class="btn_sina"><i class="iconfont icon-fenxiang201"></i></a></li>
                <li><a href="#" class="btn_qq"><i class="iconfont icon-icon"></i></a></li>
                <li><a href="#" class="btn_qzone"><i class="iconfont icon-fenxiang301"></i></a></li>
            </ul>


            <div class="copyurl">
                <input name="txt" type="text" class="text"/>
                <button class="btn_send" type="submit">复制链接</button>
            </div>

            <span class="arrow"></span>
        </div>
        <!-- VideoShare结束 -->


        <div id="MobilePhoneWatch">
            <strong>手机看直播，畅享超清画质 </strong>

            <div class="ewm">
                <img src="source/plugin/zhibo/static/images/ewm.jpg" alt="description "/>
            </div>
            <p>微信扫码在手机上继续观看</p>

            <p>二维码2小时内有效，扫码后可分享给好友</p>
            <span class="arrow"></span>
        </div>
        <!-- MobilePhoneWatch结束 -->


        <div class="VideoBox">
            <div class="bb-js">
                 <div class="zp-leftbox">
                     <div class="zp-item">
                        <div id="id_video_container_9896587163582325370" style="width:100%;height:1px;"></div>
                            <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" type="text/javascript" charset="utf-8"></script>
                            <script type="text/javascript">
                                 (function(){
                                    var option ={"channel_id":"9896587163582325370","app_id":"1251022106","width":"1024","height":"580"};
                                        new qcVideo.Player(
                                            /*代码中的id_video_container将会作为播放器放置的容器使用,可自行替换*/
                                            "id_video_container_9896587163582325370",
                                            option
                                );
                            })()
                        </script>
                    </div>
                </div>
            </div>

        </div>
        <!-- .VideoBox结束 -->


        <section id="Videogift">

            <a href="#" class="btn_danmu"><span class="btn_offon"></span><strong>弹幕关</strong></a>
            <a href="#" class="btn_liwu"></a>
            <button onclick="zan()">点赞</button>


            <div id="giftList">
                <ul>
                    <li data-name="闪电水壶1" data-price="10"><img src="source/plugin/zhibo/static/images/icon1.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶2" data-price="20"><img src="source/plugin/zhibo/static/images/icon2.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶3" data-price="30"><img src="source/plugin/zhibo/static/images/icon3.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶4" data-price="40"><img src="source/plugin/zhibo/static/images/icon4.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶5" data-price="50"><img src="source/plugin/zhibo/static/images/icon5.png"><span
                            class="arrow3"></span></li>
                </ul>
            </div>
            <!-- giftList结束 -->


            <section id="giftsend">
                <div class="giftsend_box">
                    <div class="photo">
                        <img src="source/plugin/zhibo/static/images/icon1.png">
                    </div>
                    <h4><strong>闪电水壶</strong> <em>（2OL币） </em></h4>
                    <textarea name="textarea" id="gift_ly" cols="" rows="4"> </textarea>

                    <p class="tips">可用OL币：<span class="abc"><?php echo $credit;?></span>个<a href="#"> 充值 </a></p>
                </div>
                <dl>
                    <dt> 批量赠送：</dt>
                    <dd>
                        <ul class="sl_select">
                            <li class="change">1</li>
                            <li>66</li>
                            <li>520</li>
                            <li>666</li>
                            <li>1314</li>
                        </ul>
                        <button class="btn_send" onclick="give()">赠 送</button>
                    </dd>
                </dl>
            </section>
            <!-- giftsend结束 -->

        </section>
        <!-- Videogift结束 -->


    </div>
    <!-- Video_Playwindow结束 -->


    <section id="Video_hudong">

        <ul class="Tab2">
            <li class="change"><a href="#">直播互动</a></li>
            <li><a href="#">节目介绍</a></li>
        </ul>
        <span class="clear"></span>

        <div class="Tab_nr">
            <div class="Scroll_box" data-scroll="1" data-scroll-height="577" data-scroll-width="318">


            </div>

            <div id="a">
                <div id="b">
                    <textarea id="content" style="width:238px;margin-left: -14px;height: 38px;resize:none;"
                              placeholder="您可以在这里输入弹幕吐槽哦~"></textarea>
                    <!--<input type="text" name="txt" style='border-left:0;border-top:0;border-right:0;border-bottom:1px '/>-->
                </div>
                <button id="c" onclick="add()">发送</button>
            </div>

        </div>
        <!-- .Tab_nr结束 -->
        <div class="Tab_nr">
            <div class="Scroll_box" data-scroll="1" data-scroll-height="640" data-scroll-width="318">

                <section id="VideoJieshao">
                    <h3 class="introduceTitle">新升阳新品发布会 </h3>
                    <span class="livetime"><i class="iconfont icon-time_fill"></i> 直播：2016/11/09 18:30—2016/11/10 20:30 </span>

                    <div class="content">
                        <!-- 文章内容开始 -->
                        <p><?php echo $getData['0']['channelDescribe'];?></p>

                        <!-- 文章内容结束 -->
                    </div>

                </section>
                <!-- VideoJieshao结束 -->

            </div>
        </div>
        <!-- .Tab_nr结束 -->
    </section>
    <!-- Video_hudong结束 -->


    <span class="clear"></span>
    <!-- 清除浮动 -->
</div>
<!-- Video_Content结束 -->


<div class="ad">
    <a href="#" class="photo"> <img src="source/plugin/zhibo/static/images/banner.jpg" alt="description "/></a>
</div>
<!-- .ad结束 -->


<section id="Recommend">
    <h3 class="PartTitle"> 推荐直播</h3>

    <div class="Recommend_nr">
        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <span class="clear"></span>
    </div>

    <button id="tj">添加</button>

</section>

<script>
    function zan() {
        var a = OLBIKEjq(".total_zan").text();
        var b = parseInt(a) + 1;
        OLBIKEjq(".total_zan").html('<i class="iconfont icon-appreciate"></i>' + b);

        OLBIKEjq.ajax({
            type: "POST",
            url: 'plugin.php?id=zhibo&ac=activity&op=zan&identify=<?php echo $data;?>',
            dataType: "json"

        });
    }
</script>
<script src="source/plugin/zhibo/static/js/mousewheel.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/style/font/iconfont.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/js/load.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/danmu/jquery.barrager.min.js" type="text/javascript"></script>

<script>
    function add(){
        var item={
            info:'弹幕文字信息', //文字
            href:'http://www.yaseng.org', //链接
            close:true, //显示关闭按钮
            speed:6, //延迟,单位秒,默认6
            color:'#fff', //颜色,默认白色
            old_ie_color:'#000000' //ie低版兼容色,不能与网页背景相同,默认黑色
        };

        OLBIKEjq('.zp-leftbox').barrager(item);
    }

</script>




<script>
//    var apiV3Url = 'http://bikeshopadmin.olbike.com/V3/?service=';
//    var apiV3Url = 'http://localhost/bikeshop/shopapi/V3/?service=';
    var apiV3Url = 'http://bikeshopadmin.olbike.com/V3/?service=';

    contentlist();

OLBIKEjq(function () {

        if (!<?php echo $_G['uid'];?>) {
            OLBIKEjq("#a").attr('class', 'Charform');
            OLBIKEjq("#b").attr('disabled', 'disabled').attr('class', 'text').html("<a style='color:red;margin-left: 30px;' href='member.php?mod=logging&action=login'>登录</a>发弹幕，参与主播互动");
            OLBIKEjq("#c").attr('disabled', 'disabled').attr('class', 'btn_send_false');

        } else {
            OLBIKEjq("#a").attr('class', 'Charform');
            OLBIKEjq("#b").attr('class', 'text');
            OLBIKEjq("#c").attr('class', 'btn_send');
        }
    });

    function add222() {
        var content = OLBIKEjq("#content").val();
        if (content.trim() == '') {
            document.getElementById("content").placeholder = "请输入评论";
            return;
        }
        OLBIKEjq.ajax({
            type: "POST",
            url: apiV3Url+"Danmaku.Add",
//            data: "mod=ajax&ac=add_comment&channelId=<?php echo $data;?>&content=" + content,
            data: {
                "uid": <?php echo $_G['uid'];?>,
                "username": "<?php echo $_G['username'];?>",
                "channelId": <?php echo $data;?>,
                "content": content,
            },
            dataType: "json",
            success: function (msg) {
                console.log(msg);
                var data = msg.data;
                if (data) {
                    var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                    str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&amp;size=small" alt="description" /></div>';
                    str += '<div class="Record_nr">';
                    str += '<span class="user_name">' + data.username + ' </span>';
                    str += '<p>' + data.content + ' </p>';
                    str += '<span class="floor_name">' + data.count + 'F </span>';
                    str += '</div>';
                    str += '<span class="arrow2"></span>';
                    str += '</div>';

                    //评论每次向头部提交
                    OLBIKEjq('.Scroll_box').prepend(str);
                    OLBIKEjq("#content").val('');
                } else {
                    alert("添加失败！");
                }
            },
        });
    }

    //更新评论内容
//    setInterval("getnewcomment()", 1000);
    function getnewcomment() {
        var zid = OLBIKEjq(".Scroll_box .ChatRecord:first-child").attr('data-comment-id');
        OLBIKEjq.ajax({
            type: "POST",
            url: apiV3Url+"Danmaku.getNewContentList",
            data: {
                "id": zid,
                "channelId": <?php echo $data;?>
            },
            success: function (msg) {
                var data = msg.data;
                if (data.imageSrc && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].imageSrc) {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&amp;size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data[i].imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';
                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            $(".Scroll_box").prepend(str);
                        } else {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&amp;size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p>' + data[i].content + ' </p>';
                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            OLBIKEjq(".Scroll_box").prepend(str);
                        }
                    }
                }
            },
        });
    }

    //内容列表
    function contentlist() {
//        var zid = $(".Scroll_box .ChatRecord:first-child").attr('data-comment-id');

        OLBIKEjq.ajax({
            type: "POST",
            url: apiV3Url+"Danmaku.ContentList",
            data: {
                "channelId": <?php echo $data;?>
            },
            dataType: "json",
            success: function (msg) {
                var data = msg.data;
                var content = OLBIKEjq(".Scroll_box");
                console.log(data);
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].imageSrc) {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&amp;size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data[i].imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';
                            str += '<span class="floor_name">' + data[i].count + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            content.prepend(str);
                        }
                        else {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&amp;size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p>' + data[i].content + '</p>';
                            str += '<span class="floor_name">' + data[i].count + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';

                            content.prepend(str);
                        }
                    }
                }
            }
        });
    }

    function give() {

        var price = OLBIKEjq(".change").attr('data-price');//获取价钱
        var imgSrc = OLBIKEjq(".change img")[0].src; //获取图片地址
        var number = OLBIKEjq(".sl_select >.change").text();//获取数量
        var a = new Object();
        a['img'] = imgSrc.substr(-43);
        a['number'] = number;
        console.log(JSON.stringify(a));

        if ((price * number) > <?php echo $credit;?>) {
            alert('赠送失败,积分不足,点击获取')
        } else {
            var d = $(".abc").text();
            b = d - (price * number);
            OLBIKEjq.post(apiV3Url+"Credit.Edit",{ uid: <?php echo $_G['uid'];?>, count: b });
            OLBIKEjq(".abc").text(b);

            var content = $("#gift_ly").val();
            if (content.trim() == '') {
                document.getElementById("gift_ly").placeholder = "请输入评论";
                return;
            }
            OLBIKEjq.ajax({
                type: "POST",
                url: apiV3Url+"Danmaku.Add",
                data: {
                    "uid": <?php echo $_G['uid'];?>,
                    "username": "<?php echo $_G['username'];?>",
                    "channelId": <?php echo $data;?>,
                    "content": content,
                    'gift': JSON.stringify(a)
                },
                dataType: "json",
                success: function (msg) {
                    console.log(msg);
                    var data = msg.data;
                    if (data.imageSrc) {
                        var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                        str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&amp;size=small" alt="description" /></div>';
                        str += '<div class="Record_nr">';
                        str += '<span class="user_name">' + data.username + ' </span>';
                        str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data.imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data.number+'</span>'+ data.content + ' </p>';
                        str += '<span class="floor_name">' + data.count + 'F</span>';
                        str += '</div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        //评论每次向头部提交
                        OLBIKEjq('.Scroll_box').prepend(str);
                        OLBIKEjq("#content").val('');
                    } else {
                        var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                        str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&amp;size=small" alt="description" /></div>';
                        str += '<div class="Record_nr">';
                        str += '<span class="user_name">' + data.username + ' </span>';
                        str += '<p>' + data.content + ' </p>';
                        str += '<span class="floor_name">' + data.count + 'F </span>';
                        str += '</div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        //评论每次向头部提交
                        OLBIKEjq('.Scroll_box').prepend(str);
                        OLBIKEjq("#content").val('');
                    }
//
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        }
    }
</script>



</body>
</html><?php include template('common/footer'); ?>